<template>
    <div class="mainContext">
        <el-card class="box-card">
            <el-select class="sel_man" v-model="selectid.did" @change="didChange" filterable placeholder="请选择宿舍楼">
                <el-option label=" 不限" value="null"></el-option>
                <el-option
                        v-for="item in dormitoryData"
                        :key="item.did"
                        :label="item.dname"
                        :value="item.did">
                </el-option>
            </el-select>
            <el-select class="sel_man" v-model="selectid.rid" @change="didChange" filterable placeholder="请选择宿舍门牌号">
                <el-option label=" 不限" value="null"></el-option>
                <el-option
                        v-for="item in rids"
                        :key="item.rid"
                        :label="item.rid"
                        :value="item.rid">
                </el-option>
            </el-select>
            <el-button class="add_btn" type="primary" @click="cleamRoom" >清空选中宿舍</el-button>
            <el-table class="table"
                      :data="roomData"
                      stripe
                      height="550"
                      @selection-change="handleSelectionChange"
                      style="width: 100% ;min-height:250px">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="rid"
                        label="宿舍门牌号">
                </el-table-column>
                <el-table-column
                        prop="dormitory.dname"
                        label="所属寝室楼">
                </el-table-column>
                <el-table-column
                        prop="galleryful"
                        label="容纳量">
                </el-table-column>
                <el-table-column
                        prop="occupancy"
                        label="已入住">
                </el-table-column>

                <el-table-column

                        label="操作">
                    <template #default="scope">

                        <el-button  @click="updateRow(JSON.parse(JSON.stringify( scope.row )))" type="text" size="small">调整学生</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog
                title="调整寝室"
                v-model="updateDialog"
                width="500px"
                :before-close="handleClose">
            <el-form class="form" label-width="100px">
                <!--eslint-disable-next-line-->
                <template v-for="i in  roomInfo.galleryful" :key="'key1'">
                    <!--eslint-disable-next-line-->
                    <template v-for="(item , index)  in  stuOnRoom" :key="'k'">
                        <!--eslint-disable-next-line-->

                            <div v-if="i==item.bedid">
                                <el-form-item  :label="i+'床'">
                                    <el-input  class="input" disabled v-model="item.name"></el-input>

                                </el-form-item>
                            </div>

                    </template>
                    <!--eslint-disable-next-line-->
                    <template v-for="(item,index)  in  nullbed" :key="'k'">
                        <!--eslint-disable-next-line-->
                        <div v-if="item==i" >
                            <el-form-item :label="i+'床'">
                                <el-select   value-key="scode" v-model="stuToRoom[i]" filterable placeholder="请选择">
                                    <el-option
                                            v-for="item in stuData"
                                            :key="item.scode"
                                            :label="item.name"
                                            :value="item">
                                    </el-option>
                                </el-select>
                                <el-button type="primary" @click="CheckIn(i)">入住</el-button>
                            </el-form-item>
                        </div>
                    </template>



                </template>

            </el-form>

        </el-dialog>

    </div>
</template>

<script>
    import api from "../api";

    export default {
        name: "Room",
        data(){
            return{
                multipleSelection: [],
                stuData:[],
                addDialog:false,
                updateDialog:false,
                roomData:[],
                dormitoryData:[],
                rids:[],
                nullbed:[],
                stuOnRoom:[],
                stuToRoom:[],
                roomInfo:{
                    "id":null,
                    "rid":"",
                    "did":"",
                    "galleryful":null
                },
                roomRules:{
                    "id":{required: true, message: '该项不可空', trigger: 'blur'},
                    "rid":{required: true, message: '该项不可空', trigger: 'blur'},
                    "did":{required: true, message: '该项不可空', trigger: 'blur'},
                    "galleryful":{required: true, message: '该项不可空', trigger: 'blur'},
                },
                selectid:{
                    rid:null,
                    did:null,
                    pageNum:null,
                    pageSize:null
                }
            }
        },
        methods:{
            CheckIn(i){
                this.stuToRoom[i].rid=this.roomInfo.id;
                this.stuToRoom[i].bedid=i;
              console.log(this.stuToRoom[i])
                api.post("/student/update",this.stuToRoom[i]).then(res=>{

                    if(res.state){
                        this.loadData({});
                        this.$message.success("入住成功")
                    }
                    else{
                        this.$message.error("数据加载出错")
                    }

                }).catch(res=>{
                    console.log(res)
                    this.$message.error("服务器出错了!")
                });
            },
            cleamRoom(){
                let rooms=[];
                this.multipleSelection.forEach(row=>{
                    // console.log(row.id)
                    rooms.push(row.id);
                })
                api.post("/room/cleanRoom", {room:rooms}).then(res => {
                    // console.log(res.data.list)
                    if(res.state){
                        this.loadData({});
                        this.$message.success("清空成功")
                    }
                    else{
                        this.$message.error("数据加载出错")
                    }

                }).catch(res=>{
                    console.log(res)
                    this.$message.error("服务器出错了!")
                });
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            didChange(){
                let data = JSON.parse(JSON.stringify(this.selectid));
                this.loadData(data)

            },

            updateRow(Row){
                this.updateDialog=true;
                this.roomInfo=Row;
                api.post("/room/getSutudent", Row.id).then(res => {
                    // console.log(res.data.list)
                    if(res.state){
                        this.stuOnRoom=res.data;
                        let nullbed=[];
                        for(var i=1;i<Row.galleryful+1;i++){
                            // console.log(i)
                            let has=false;
                            this.stuToRoom[i]={};

                            res.data.forEach(r=>{
                                if(r.bedid==i){
                                    has=true;
                                    this.stuToRoom[i]=r;
                                    // console.log(i,r)
                                }
                            })
                            if(!has){
                                nullbed.push(i)
                            }
                        }
                        this.nullbed=nullbed;

                    }
                    else{
                        this.$message.error("数据加载出错")
                    }

                }).catch(res=>{
                    console.log(res)
                    this.$message.error("服务器出错了!")
                });
                this.roomInfo =Row;
                console.log(this.nullbed)
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        this.cleanData();
                        done();
                    })
                    .catch(_ => {});
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            cleanData(){
                this.roomInfo={
                    "id":null,
                        "rid":"",
                        "did":"",
                        "galleryful":null
                }
            },
            loadData(args1) {
                api.post("/room/list",args1).then(res => {
                    // console.log(res.data.list)
                    if(res.state)
                        this.roomData=res.data.list;
                    else{
                        this.$message.error("数据加载出错")
                    }

                }).catch(res=>{
                    console.log(res)
                    this.$message.error("服务器出错了!")
                });
                api.post("/dormitory/list",{}).then(res=>{

                    if(res.state)
                        this.dormitoryData=res.data.list;
                    else{
                        this.$message.error("数据加载出错")
                    }

                }).catch(res=>{
                    console.log(res)
                    this.$message.error("服务器出错了!")
                });
                api.post("/student/list",{}).then(res=>{

                    if(res.state)
                        this.stuData=res.data.list;
                    else{
                        this.$message.error("数据加载出错")
                    }

                }).catch(res=>{
                    console.log(res)
                    this.$message.error("服务器出错了!")
                });
            },
        },
        mounted(){
            this.loadData({})
            api.post("/room/listrid",{}).then(res => {
                // console.log(res.data.list)
                if(res.state)
                    this.rids=res.data;
                else{
                    this.$message.error("数据加载出错")
                }

            }).catch(res=>{
                console.log(res)
                this.$message.error("服务器出错了!")
            });

        }
    }
</script>

<style  lang="scss">
    .mainContext {
        margin: 100px auto;
        text-align: center;

        .box-card{
            width: 1000px;
            margin: 0px auto;
            border-radius: 10px;
            box-shadow: #ccc 10px 10px 10px;
            .add_btn{
                float: right;
                margin: 0px 50px 20px 10px;
            }
            .el-card{
                border-radius:10px;

                .sel_man{
                    width: 200px;
                    margin-right: 15px;
                }

            }


        }
        .form{
            .sel_man{
                width: 100%;
            }
        }
        .el-form-item__content{
            width: 300px;
            .el-input{
                width: 200px;

            }
            .input{
                position: relative;
                left: -43px;
            }
            .el-select{

            }
            .el-button{
                position: relative;

                margin-left: 20px;
            }
            .cell{
                text-align: center;
            }
        }

    }
</style>